<template>
  <div class="h-screen bg-gray-100">
    <van-nav-bar v-if="showNavBar" :title="title" :left-arrow="back" @click-left="onClickBack"/>
    <template v-if="props.lister.enabled && props.lister.pageable">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <slot :contentClass="{'content-height-has-nav': showNavBar, 'pt-4': true}" :listerData="listerData" :more="more"></slot>
      </van-pull-refresh>
    </template>
    <template v-else>
      <slot :contentClass="{'content-height-has-nav': showNavBar, 'pt-4': true}" :listerData="listerData"></slot>
    </template>
  </div>
</template>

<script setup>
import {useRouter, useRoute} from "vue-router";
import {computed, onMounted, watch, ref, onBeforeMount} from "vue";
import {useStore} from "vuex";

const props = defineProps({
  "showNavBar": {
    type: Boolean,
    default: () => true
  },
  "title": {
    type: String,
    default: () => ""
  },
  "back": {
    type: Boolean,
    default: () => true
  },
  "lister": {
    type: Object,
    default: () => ({
      "enabled": false,
      "pageable": {
        type: Boolean,
        default: () => false
      },
      "modelName": {
        type: String,
        default: () => null
      },
      "query": {
        type: Object,
        default: () => {}
      },
      "autoload": {
        type: Boolean,
        default: () => true
      }
    })
  },
})

if (typeof props.lister.autoload == "undefined") {
  props.lister.autoload = true
}

const router = useRouter()
const route = useRoute()
const store = useStore()

const title = computed(() => props.title || route.meta.title)


import apis from '../apis'

/* List data */
const lister = ref(props.lister.pageable ? {page: 1, size: 10, data: []} : [])

const listerData = computed(() => props.lister.pageable ? lister.value.data : lister.value)

const refreshing = ref(false)
const loading = ref(false)
const more = ref(true)

const appendData = (data) => {
  if (props.lister.pageable) {
    lister.value.page = data.page
    lister.value.size = data.size
    lister.value.data = lister.value.data.concat(data.data)
  } else {
    lister.value = data
  }
}

const refresh = () => {
  const config = {
    label: props.lister.modelName + '_list',
    show_loading: true
  }

  if (props.lister.pageable) {
    config.params = {
      page: lister.value.page,
      size: lister.value.size,
      ...props.lister.query
    }
  } else {
    config.params = {
      ...props.lister.query
    }
  }

  loading.value = true

  let modelName = props.lister.modelName
  let methodName = 'lister'
  if (props.lister.modelName.indexOf('.') != "-1") {
    modelName = props.lister.modelName.split('.')[0]
    methodName = props.lister.modelName.split('.')[1]
  }
  apis[modelName][methodName](config).then((response) => {
    loading.value = false
    refreshing.value = false
    const result = response.data
    appendData(result.data)
    more.value = listerData.value.length >= result.data.total ? false : true
  }).catch(() => {
    loading.value = false
    refreshing.value = false
  })
}

const onRefresh = () => {
  if (props.lister.pageable) {
    lister.value.page = 1
    lister.value.data = []
  } else {
    lister.value = []
  }
  refreshing.value = true
  refresh()
}

if (props.lister.enabled) {
  if (props.lister.autoload) {
    refresh()
  }
}

const onMore = () => {
  if (loading.value) {
    return
  }

  if (listerData.value.length == 0) {
    lister.value.page = 1
    lister.value.data = []
    refresh()
  } else {
    lister.value.page += 1
    refresh()
  }
}

onMounted(() => {

})

/* Back */
const onClickBack = () => {
  router.back()
}

defineExpose({
  onRefresh,
  onMore,
  loading,
  lister
})
</script>

<style scoped>

</style>
